<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data function</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<body>
    <div id="root">
        <h1>data</h1>
        <hr>
        单向绑定：<input type="text" :value="msg.message">
        <hr>
        双向绑定：<input type="text" v-model:value="msg.message">
        <hr>
        <h2>v-model简写</h2>
        双向绑定：<input type="text" v-model="msg.message">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // const vue = 
        const vm = new Vue({
          el: "#root",
        // data的函数式写法。
        //    data() {
        //        console.log(this) // vue
        //        return {
        //            message:  "create by vue"
        //        }
        //    },
            // data:function(){
            //     console.log(this) // vue
            //    return {
            //     msg:{
            //         message: "$mount"
            //     },
            //     url:"https://www.baidu.com/"
            //    }
            // }
            data: ()=>{
                // 建议不要使用箭头函数，不然Vue所管理的函数变为window托管。
                console.log(this) // window
               return {
                msg:{
                    message: "$mount"
                },
                url:"https://www.baidu.com/"
               }
            }
        }); // vm
    </script>
</body>
</html>